<template>
  <div class="real-high-risk-wrap">
    <el-form
      :inline="true"
      :model="searchForm"
      class="demo-form-inline"
      @submit.native.prevent
    >
      <el-form-item v-if="isMuilUnitUser">
        <el-select
          filterable
          @change="getList(1)"
          v-model="searchForm.organizationId"
          placeholder="请选择业主单位"
        >
          <el-option
            v-for="item in orgOptions"
            :key="item.organizationId"
            :label="item.shortName"
            :value="item.organizationId"
          >
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-date-picker
          v-model="searchForm.time"
          type="daterange"
          align="right"
          unlink-panels
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          value-format="yyyy-MM-dd"
          :picker-options="util.intTimePickerOptions()"
          @change="getList(1)"
        >
        </el-date-picker>
      </el-form-item>
      <el-form-item>
        <el-select
          filterable
          @change="getList(1)"
          v-model="searchForm.handlerStatus"
          placeholder="请选择处理状态"
        >
          <el-option label="全部处理状态" value="-1"></el-option>
          <el-option label="未处理" value="0"></el-option>
          <el-option label="已处理" value="1"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button class="form-search-btn" type="primary" @click="getList(1)"
          >查询</el-button
        >
      </el-form-item>
    </el-form>
    <el-row class="overview-wrap" :gutter="0" type="flex" justify="center">
      <el-col :span="24">
        <div class="item-wrap">
          <p class="item-value color-2">{{ realRiskUnitNumber }}</p>
          <p class="item-title">实时高危信号单位总数</p>
        </div>
      </el-col>
    </el-row>
    <el-table
      v-loading="loading"
      :data="tableData"
      ref="mainTable"
      style="width: 100%"
    >
      <el-table-column label="序号" type="index" width="50"> </el-table-column>
      <el-table-column
        v-if="isMuilUnitUser"
        prop="organizationName"
        width="250"
        label="业主单位"
      >
      </el-table-column>
      <el-table-column prop="selfDesc" label="描述"> </el-table-column>
      <el-table-column label="发生时间">
        <template slot-scope="scope">
          <span style="margin-left: 10px">{{ scope.row.startTime }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="handlerStatus" label="处理状态">
        <template slot-scope="scope">
          <span
            :class="
              'tatus-icon-tags ' +
                util.transhandlerStatusColor(scope.row.handlerStatus)
            "
          ></span
          >{{ util.transhandlerStatusText(scope.row.handlerStatus) }}
        </template>
      </el-table-column>
      <el-table-column label="操作" width="160">
        <template slot-scope="scope">
          <el-button @click="showDetail(scope.row)" type="text" size="small"
            >详情</el-button
          >
          <span v-if="scope.row.handlerStatus != 1" class="dividing-line"
            >|</span
          >
          <el-button
            v-if="scope.row.handlerStatus != 1"
            @click="dealWith(scope.row)"
            type="text"
            size="small"
            >处理</el-button
          >
          <span class="dividing-line">|</span>
          <el-button
            @click="
              util.openCallCenter(scope.row.organizationId, scope.row.name, 3,scope.row)
            "
            type="text"
            size="small"
            >电话呼叫</el-button
          >
        </template>
      </el-table-column>
      <el-table-column type="expand" width="1">
        <template slot-scope="scope">
          <el-tabs
            type="border-card"
            :data-row="{ scope }"
            @tab-click="tabClick"
          >
            <el-tab-pane data-label="base">
              <span slot="label">更多信息</span>
              <el-form
                v-if="detailMoreInfoObj[scope.row.id]"
                label-position="left"
                class="demo-table-expand"
              >
                <el-form-item label="警情类型：">
                  <span>{{
                    detailMoreInfoObj[scope.row.id].signalTypeName
                  }}</span>
                </el-form-item>
                <el-form-item label="警情描述：">
                  <span>{{
                    (detailMoreInfoObj[scope.row.id].resetTime || "") +
                      " " +
                      detailMoreInfoObj[scope.row.id].selfDesc
                  }}</span>
                </el-form-item>
                <el-form-item label="处理记录：">
                  <span>{{ detailMoreInfoObj[scope.row.id].remarks }}</span>
                </el-form-item>
                <el-form-item label="处理类型：">
                  <span>{{
                    detailMoreInfoObj[scope.row.id].handlerTypeName
                  }}</span>
                </el-form-item>
                <el-form-item
                  v-for="(item, index) in detailMoreInfoObj[scope.row.id]
                    .alertList"
                  :key="index"
                  :label="index == 0 ? '关联警情：' : ''"
                >
                  <span>{{
                    (item.createTime || "") + " " + item.selfDesc
                  }}</span>
                </el-form-item>
              </el-form>
            </el-tab-pane>
            <el-tab-pane data-label="callrecord">
              <span slot="label">呼叫记录</span>
              <call-record :obj="{ type: 3, id: scope.row.id }"></call-record>
            </el-tab-pane>
          </el-tabs>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      background
      @size-change="pageSizeChange"
      @current-change="pageChange"
      :current-page="currentPage"
      :page-sizes="[10, 50, 100]"
      :page-size="10"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total"
    >
    </el-pagination>
    <el-dialog
      :close-on-click-modal="false"
      title="火灾高危信号处理"
      width="600px"
      top="25vh"
      :visible.sync="dialogDealWith"
      @close="closeDealWith"
    >
      <el-row class="user-info-form" type="flex" justify="center">
        <el-col>
          <el-form
            label-position="top"
            :model="dealWithForm"
            :rules="dealWithFormRules"
            ref="dealWithForm"
            @submit.native.prevent
          >
            <input type="hidden" id="rowId" v-model="dealWithForm.id" />
            <el-form-item
              label-width="110px"
              label="处理类型："
              prop="handlerType"
            >
              <el-select
                filterable
                v-model="dealWithForm.handlerType"
                placeholder="请选择处理类型"
              >
                <el-option
                  v-for="item in handlerTypeOptions"
                  :key="item.dictKey"
                  :label="item.dictValue"
                  :value="item.dictKey"
                >
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item prop="remarks" label="描述：">
              <el-input
                type="textarea"
                :rows="7"
                v-model="dealWithForm.remarks"
                placeholder="描述"
              ></el-input>
            </el-form-item>
            <el-form-item label-width="0" class="verifyidentity-button">
              <el-button @click="closeDealWith">取消</el-button>
              <el-button type="primary" @click="confirmDealWith('dealWithForm')"
                >确定</el-button
              >
            </el-form-item>
          </el-form>
        </el-col>
      </el-row>
    </el-dialog>
  </div>
</template>

<script>
import util from "@/utils/util";
import { getDictByCode } from "@/api/dic";
import { getOrgList } from "@/api/org";
import {
  getRealHighRiskList,
  updateHandleResult,
  getSingnalCount
} from "@/api/highRiskSignal";
import { getById } from "@/api/riskFireSignal";
import CallRecord from "../Common/CallRecord";

export default {
  name: "RealTimeHighRiskSignal",
  components: {
    CallRecord
  },
  data() {
    return {
      util: util,
      isMuilUnitUser: this.$store.state.userinfo.isMuilUnitUser,
      loading: false,
      orgOptions: [{ organizationId: "", shortName: "全部业主单位" }],
      searchForm: {
        organizationId: this.$store.state.userinfo.isMuilUnitUser
          ? ""
          : this.$store.state.userinfo.org.id,
        time: "",
        handlerStatus: "-1"
      },
      detailMoreInfoObj: {}, //展开详情中的更多信息
      tableData: [],
      // 分页
      currentPage: 1,
      pageSize: 10,
      total: 0,
      realRiskUnitNumber: 0, // 实时高危信号单位总数
      dialogDealWith: false,
      dealWithForm: {
        id: "",
        handlerType: "",
        remarks: ""
      },
      dealWithFormRules: {
        handlerType: [
          { required: true, message: "请选择处理类型", trigger: "change" }
        ]
      },
      handlerTypeOptions: []
    };
  },
  created: function() {
    //绑定下拉框
    if (this.isMuilUnitUser) {
      getOrgList({ queryType: 0 }).then(data => {
        this.orgOptions.push.apply(this.orgOptions, data.data);
      });
    }
    this.getList();
  },
  methods: {
    getList(_pageIndex, _pageSize) {
      //获取列表
      if (_pageIndex) {
        this.currentPage = _pageIndex;
      }
      if (_pageSize) {
        this.pageSize = _pageSize;
      }
      let that = this;
      let parames = {
        organizationId: that.searchForm.organizationId,
        startTimeStr:
          that.searchForm.time && that.searchForm.time.length > 0
            ? that.searchForm.time[0] + " 00:00:00"
            : "",
        endTimeStr:
          that.searchForm.time && that.searchForm.time.length > 0
            ? that.searchForm.time[1] + " 23:59:59"
            : "",
        timeType: 13,
        handlerStatus: that.searchForm.handlerStatus, // 处理状态
        isReset: 0, //实时
        queryType: 1,
        pageIndex: that.currentPage - 1,
        pageSize: that.pageSize
      };
      that.loading = true;
      getRealHighRiskList(parames).then(res => {
        that.total = res.total;
        that.tableData = res.data;
        that.loading = false;
      });
      // 获取统计信息
      that.getStatis();
    },
    pageSizeChange(val) {
      //页码切换
      this.getList(1, val);
    },
    pageChange(val) {
      //翻页
      this.getList(val);
    },
    // 详细
    showDetail(row) {
      const $table = this.$refs.mainTable;
      row.isExpand = !row.isExpand; //给row一个自定义展开状态
      $table.toggleRowExpansion(row);
      if (row.isExpand) {
        this.getDetail(row);
      }
    },
    tabClick(tab, event) {
      var that = this;
      var tabType = tab.$attrs["data-label"];
      var row = tab.$parent.$attrs["data-row"].scope.row;
      if (tabType == "base") {
        //更多信息
        this.getDetail(row);
      } else if (tabType == "callrecord") {
        //通话记录
      }
    },
    getDetail(row) {
      this.loading = true;
      getById({
        id: row.id
      }).then(result => {
        this.$set(this.detailMoreInfoObj, [row.id], result.data);
        this.loading = false;
      });
    },
    // 处理
    dealWith(row) {
      this.dialogDealWith = true;
      this.dealWithForm.id = row.id;
      getDictByCode({ code: 83 }).then(res => {
        this.handlerTypeOptions = res.data.dictValueObj;
      });
    },
    // 关闭处理
    closeDealWith() {
      this.dialogDealWith = false;
      // 初始化表单
      this.$refs["dealWithForm"].resetFields();
    },
    // 确认处理
    confirmDealWith(formName) {
      // 阻止事件冒泡
      event.stopPropagation();
      let that = this;
      that.$refs[formName].validate(valid => {
        if (valid) {
          let parames = that.dealWithForm;
          // 增加用户名参数
          parames.account = that.$store.state.userinfo.accountName;
          // 提交
          updateHandleResult(parames).then(res => {
            if (res.status === 200) {
              that.$message({
                message: "处理成功！",
                type: "success"
              });
              that.closeDealWith();
              // 刷新列表
              that.getList();
            } else {
              that.$message({
                message: res.info,
                type: "warning"
              });
            }
          });
        } else {
          return false;
        }
      });
    },
    //头部统计
    getStatis() {
      let that = this;
      let parames = {
        organizationId: that.searchForm.organizationId,
        handlerStatus: that.searchForm.handlerStatus, // 处理状态
        startTimeStr:
          that.searchForm.time && that.searchForm.time.length > 0
            ? that.searchForm.time[0] + " 00:00:00"
            : "",
        endTimeStr:
          that.searchForm.time && that.searchForm.time.length > 0
            ? that.searchForm.time[1] + " 23:59:59"
            : "",
        timeType: 13,
        isReset: 0 //实时
      };
      getSingnalCount(parames).then(res => {
        that.realRiskUnitNumber = res.data.orgCount;
      });
    }
  }
};
</script>
<style>
.real-high-risk-wrap .demo-table-expand .el-form-item {
  margin-bottom: 0;
}
</style>
